<template>
  <div class="departments-container">
    <div class="app-container">
      <!-- 卡片组件(分为头部和身体) -->
      <el-card class="box-card">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane
            label="组织架构"
            name="first"
            class="tab-pane"
          ><el-row type="flex" justify="space-between" align="middle" class="department-header">
             <!-- 第一列20份 -->
             <el-col :span="20">
               <i class="el-icon-s-home" />
               <span class="company">江苏传智播客教育科技股份有限公司</span>
             </el-col>
             <!-- 第二列4份 -->
             <el-col :span="4">
               <!-- 在容器范围里, 一行再分2列 -->
               <el-row type="flex" justify="end">
                 <el-col :span="12">负责人</el-col>
                 <el-col :span="12">
                   <!-- 这个之前在头部导航右侧下拉菜单讲过 -->
                   <el-dropdown>
                     <!-- 下拉菜单文字 -->
                     <span class="el-dropdown-link"> 操作<i class="el-icon-arrow-down el-icon--right" /> </span>
                     <!-- 下拉项 -->
                     <el-dropdown-menu slot="dropdown">
                       <el-dropdown-item @click.native="add()">添加子部门</el-dropdown-item>
                     </el-dropdown-menu>
                   </el-dropdown>
                 </el-col>
               </el-row>
             </el-col>
           </el-row>
            <!-- 在这里设置, 树形控件 -->
            <el-tree class="departments-tree" :data="treeData" :props="defaultProps" :default-expand-all="false">
              <!-- 默认插槽  并且使用内部的数据进行自定义模板的渲染, scope.data 所以直接key解构赋值变量也是data(对应数据对象)-->
              <template #default="{ data }">
                <el-row type="flex" justify="space-between" align="middle" style="height: 40px; width: 100%">
                  <!-- 部门名字 -->
                  <el-col :span="20">
                    <span>{{ data.name }}</span>
                  </el-col>
                  <!-- 功能操作区域 -->
                  <el-col :span="4">
                    <el-row type="flex" justify="end">
                      <!-- 两个内容 -->
                      <el-col>{{ data.manager }}</el-col>
                      <el-col>
                        <!-- 下拉菜单 element -->
                        <el-dropdown>
                          <span> 操作<i class="el-icon-arrow-down" /> </span>
                          <!-- 下拉菜单 -->
                          <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item @click.native="add(data)">添加子部门</el-dropdown-item>
                            <el-dropdown-item @click.native="edit(data)">编辑部门</el-dropdown-item>
                            <el-dropdown-item
                              v-if="!data.children"
                              @click.native="del(data)"
                            >删除部门</el-dropdown-item>
                          </el-dropdown-menu>
                        </el-dropdown>
                      </el-col>
                    </el-row>
                  </el-col>
                </el-row>
              </template>
            </el-tree>
          </el-tab-pane>
        </el-tabs>
      </el-card>
      <!-- 新增部门-弹窗子组件 -->
      <departDialog
        ref="departDialog"
        :dialog-visible.sync="showDialog"
        :employess-list="employessList"
        :origin-list="originList"
        :is-edit="isEdit"
        :click-id="clickId"
        @getFormData="addOrEditFn"
      />
    </div>
  </div>
</template>

<script>
// 导入接口函数
import {
  departmentsListAPI,
  getEmployeeSimpleAPI,
  addDepartmentsAPI,
  getDepartDetailAPI,
  updateDepartmentsAPI,
  delDepartmentAPI
} from '@/api'
// 导入工具函数
import { transTree } from '@/utils'
// 导入子组件
import departDialog from './components/departDialog.vue'
export default {
  name: 'Departments',
  components: {
    // 注册子组件
    departDialog
  },
  data() {
    return {
      activeName: 'first', // 被激活的 Tab 标签页
      // 树形控件数据
      treeData: [],
      // 定义结构显示
      defaultProps: {
        label: 'name'
      },
      // 是否展示-添加子频道的弹出层
      showDialog: false,
      // 部门负责人列表
      employessList: [],
      // 用于弹窗内-校验部门code和name是否重复数据数组
      originList: [],
      // 点击的当前事件对象的ID
      clickId: '',
      // 本次是否为编辑状态
      isEdit: false
    }
  },
  created() {
    // 请求-部门列表
    this.getDepartmentListFn()
    // 请求-部门负责人列表
    this.getEmployessListFn()
  },
  methods: {
    // 请求部门列表
    async getDepartmentListFn() {
      const res = await departmentsListAPI()
      // console.log(res)
      // 格式化需要传递给子组件的数据
      this.originList = res.data.depts.map(item => ({
        id: item.id,
        code: item.code,
        name: item.name,
        pid: item.pid // 下面使用
      }))
      // 因为后台返回的字段是id和pid而且根是空字符串, 如果不是需要自己改变transTree里判断条件等
      this.treeData = transTree(res.data.depts, '')
    },
    // 请求-部门负责人列表
    async getEmployessListFn() {
      const res = await getEmployeeSimpleAPI()
      // console.log(res)
      this.employessList = res.data
    },
    // 树节点-点击事件
    handleClick(tab, event) {
      // console.log(tab, event)
    },
    // 右侧-新增子部门
    add(data) {
      // 添加按钮
      this.isEdit = false
      if (data) {
        // 获取id
        this.clickId = data.id
        // 打开弹窗
        this.showDialog = true
      } else {
        // 获取id
        this.clickId = ''
        // 打开弹窗
        this.showDialog = true
      }
    },
    // 右侧-编辑子部门
    edit(data) {
      // 编辑按钮
      this.isEdit = true
      // 获取id
      this.clickId = data.id
      // 打开弹窗
      this.showDialog = true
      this.$nextTick(async() => {
        // 调接口,拿到数据回填
        const res = await getDepartDetailAPI(this.clickId)
        // console.log(res)
        this.$refs.departDialog.form = res.data
      })
    },
    // 右侧-删除子部门
    async del(data) {
      // 调删除接口
      await delDepartmentAPI(data.id)
      // 重新渲染页面列表
      this.getDepartmentListFn()
    },
    // 新增或者编辑部门表单
    async addOrEditFn(formData) {
      if (this.isEdit) {
        // 添加id参数
        formData.id = this.clickId
        // 调用更新编辑部门接口
        await updateDepartmentsAPI(formData)
      } else {
        // console.log(formData)
        // 添加pid参数
        formData.pid = this.clickId
        // 调用新增部门接口
        await addDepartmentsAPI(formData)
        // console.log(res)
      }
      // 重新渲染页面列表
      this.getDepartmentListFn()
    }
  }
}
</script>

<style lang="scss" scoped>
.box-card {
  padding: 10px 30px;
  background-color: #ffec8b;
}

.tab-pane {
  padding: 20px 80px;

  .company {
    margin-left: 12px;
    font-weight: bold;
    font-size: 14px;
  }

  .department-header {
    height: 50px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ccc;
  }
}

.departments-tree {
  margin: 12px 0px;
  background-color: #8fd;
}

// 树形控件节点_内容样式(每行)
.el-tree-node__content {
  height: 30px !important;
  font-size: 14px !important;
  // background-color: #0099ff;
}
</style>
